<template>
  <div class="mapMarksInfo-container">
    <SliteMapViewer @ready="loadMap" :config="config"></SliteMapViewer>
  </div>
</template>
<script>
import SliteMapViewer from "./SliteMapViewer.vue";
import cameraBlue from "@/assets/images/map/marker-icon/cameraBlue.png";
import "ol/ol.css";

export default {
  components: { SliteMapViewer },
  props: {},
  data() {
    return {
      route: "",
      radius: "",
      maxZoom: "",
      displayLevel: "",
      showPointInfo: false,
      showPointInfoTips: false,
      pointInfo: [],
      dialogVisible: false,
      isSchematic: false,
      currentMarksList: [],
      config: {
        locationConfig: {
          show: false,
        },
      },
      mapClass: undefined,
      regionConfig: {},
    };
  },
  watch: {},
  computed: {},
  methods: {
    /**
     *
     * @param {*} res 为json格式，包含经纬度(lng,lat)，半径(radius)，和要渲染到地图上的点位列表（points）,units:单位
     */
    setData(res = {}) {
      console.log("resresresresresresresresresresres", res);
      this.route = res?.route;
      this.radius = res?.radius;
      this.displayLevel = res?.displayLevel
      this.isSchematic = res?.isSchematic;
      this.showPointInfo = res?.showPointInfo;
      this.showPointInfoTips = res?.showPointInfoTips;
      this.addPointMarks(res?.points);
    },

    loadMap(map) {
      this.mapClass = map;
    },
    /**
     * 绘制圆
     */
    addArea() {
      if (this.mapClass.getLayer("id", "DrawShapLayer").length > 0) {
        this.mapClass.onRemoveLayer("id", "DrawShapLayer");
      }
      this.mapClass.addLayer({
        type: "DrawShapLayer",
        shapConfig: {
          type: "CustomCircle",
          dataType: "corrdinates", // 数据类型 有wkt,geogson,corrdinates 等三种类型
          data: this.regionConfig,
          isMultipleBool: false, // 不允许多个存在 false-> 不允许，true -> 允许
          onlyShow: true,
        },
        lineConfig: {
          // 线条样式设置
          drawEndStyle: {
            //  统一设置图像 绘制完成样式设置
            fillColor: "rgba(121,187,255,.3)",
            strokeColor: "rgba(255,0,255,.3)",
            strokeLineDash: [0, 0],
            strokeWidth: 2,
          },
        },
      });
    },
    addPointMarks(points) {
      if (this.mapClass.getLayer("id", "MarkerLayer").length > 0) {
        this.mapClass.onRemoveLayer("id", "MarkerLayer");
      }
      /**
       * 未选中样式
       */
      let markStyle = [
        {
          type: "singleMark",
          legend: 1,
          pointType: "image",
          style: {
            url: cameraBlue,
          },
        },
      ];
      this.mapClass.addLayer({
        type: "MarkerLayer",
        layerStyle: markStyle,
        points,
        actions: [
          {
            type: "click",
            hitTolerance: 10, // 命中容差
            handle: this.handleMarkClick,
          },
        ],
      });
    },
    handleMarkClick(list) {
      this.$emit("markClick", list);
      if (list?.length == 1) {
        this.showPointInfo = true;
        this.showPointInfoTips = true;
        this.pointInfo = list;
        let overlayerConfigs = [];
        if (this.pointInfo.length > 0) {
          if (this.showPointInfoTips) {
            // 显示信息窗口
            this.$nextTick(() => {
              for (let i in this.pointInfo) {
                let overlayer = {
                  id: `overlayerId${i}`,
                  element: this.$refs[`tipsPointRef${i}`]?.[0],
                  position: [this.pointInfo[i].lng, this.pointInfo[i].lat],
                };
                overlayerConfigs.push(overlayer);
              }
              this.mapClass.addOverLayers(overlayerConfigs);
            });
          }
        }
      } else {
        this.showPointInfo = false;
        this.showPointInfoTips = false;
      }
    },
    closeInfo() {
      this.showPointInfoTips = false;
    },
  },
  created() {},
  mounted() {},
};
</script>
<style lang="scss" scoped>
.mapMarksInfo-container {
  width: 100%;
  height: 100%;
  .info-container {
    cursor: pointer;
    .info-item {
      display: flex;
      -webkit-flex-wrap: nowrap;
      flex-wrap: nowrap;
      align-items: center;
      justify-content: start;
      .info-left {
        color: #141414;
        opacity: 0.9;
        background: #fffafa;
        min-width: 16.714286rem;
        height: 10.357143rem;
        border: 2px solid #d6d3d3;
        border-radius: 10px;
        -webkit-flex-wrap: nowrap;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
        background-size: contain;
        font-size: 1.214286rem;
        margin-top: -13.785714rem;
        text-align: center;
        .info {
          line-height: 14px;
        }
        .titleinfo {
          margin-top: 14px;
        }
      }
    }
  }
}
</style>
